<template>
    <div class="container">
        <Breadcrumb
            :items="[
                'menu.monitor',
                'menu.monitor.device',
                'menu.device.device.detail',
            ]"
        />
        <a-space direction="vertical" :size="16" fill>
            <a-card class="general-card">
                <detail-item
                    :data="deviceInfoData"
                    :title="$t('device.detail.title')"
                    :loading="deviceInfoLoading"
                    :label-style="{
                        width: '120px',
                        textAlign: 'right',
                        paddingRight: '24px',
                    }"
                    layout="inline-horizontal"
                ></detail-item>
            </a-card>
            <a-card class="general-card" hoverable style="padding: 20px 0 0">
                <a-tabs type="rounded" default-active-key="1">
                    <a-tab-pane
                        key="1"
                        class="detail-tab-pane"
                        :title="$t('she-bei-gui-ge')"
                    >
                        <a-table
                            row-key="id"
                            :loading="tableConfig.loading"
                            :columns="tableConfig.columns"
                            :data="tableConfig.data"
                            :bordered="false"
                        >
                        </a-table>
                    </a-tab-pane>
                    <a-tab-pane
                        key="3"
                        class="detail-tab-pane"
                        title="设备告警"
                    >
                        <a-table
                            row-key="id"
                            :loading="deviceAlert.loading"
                            :columns="deviceAlert.columns"
                            :data="deviceAlert.data"
                            :bordered="false"
                            :pagination="pagination"
                            @page-change="onPageChange"
                        >
                            <template #detail="{ record }">
                                <div
                                    v-for="item in record.detail"
                                    :key="item"
                                    class="detail-number"
                                >
                                    {{ item.name }} :<span>{{
                                        item.value
                                    }}</span>
                                </div>
                            </template>
                        </a-table>
                    </a-tab-pane>
                </a-tabs>
            </a-card>
        </a-space>
    </div>
</template>

<script setup lang="ts">
    import DetailItem from '@/components/detail-item.vue';
    import useLoading from '@/hooks/loading';
    import { reactive, ref } from 'vue';
    import { useRoute } from 'vue-router';
    import { get } from 'lodash';
    import { useI18n } from 'vue-i18n';
    import {
        getDeviceInfo,
        getDeviceSpecList,
        getDeviceAlertList,
    } from './service';

    const { query } = useRoute();
    const { t } = useI18n();
    const { loading: deviceInfoLoading, setLoading: setDeviceInfoLoading } =
        useLoading(true);
    const pagination = reactive({
        current: 1,
        pageSize: 10,
        total: 0,
    });
    const deviceInfoData = ref([
        {
            label: t('device.name'),
            path: 'deviceName',
            value: '',
        },
        {
            label: t('she-bei-bian-ma'),
            path: 'deviceNo',
            value: '',
        },
    ]);
    const tableConfig = reactive({
        loading: false,
        columns: [
            {
                title: t('gui-ge-ming-cheng'),
                dataIndex: 'specName',
            },
            {
                title: t('gui-ge-zhi'),
                dataIndex: 'specValue',
            },
        ],
        data: [],
    });

    const deviceAlert = reactive({
        loading: false,
        columns: [
            {
                title: t('alert.name'),
                dataIndex: 'alertName',
            },
            {
                title: t('alert.create.time'),
                dataIndex: 'createTime',
            },
            {
                title: t('alert.detail'),
                dataIndex: 'detail',
                slotName: 'detail',
            },
        ],
        data: [],
    });
    const fetchDeviceInfoData = async () => {
        try {
            setDeviceInfoLoading(true);
            const data = await getDeviceInfo({ id: query.id });
            const { result } = data as any;
            deviceInfoData.value.forEach((item) => {
                const value = get(result, item.path);
                item.value = item.formatter ? item.formatter(value) : value;
            });
        } finally {
            setDeviceInfoLoading(false);
        }
    };
    fetchDeviceInfoData();

    const fetchDeviceSpecData = async () => {
        try {
            tableConfig.loading = true;
            const data = await getDeviceSpecList({ deviceId: query.id });
            const { result } = data as any;
            tableConfig.data = result || [];
        } finally {
            tableConfig.loading = false;
        }
    };
    fetchDeviceSpecData();
    const fetchDeviceAlertData = async (params: any) => {
        try {
            deviceAlert.loading = true;
            const data = await getDeviceAlertList(params);
            const { result } = data as any;
            deviceAlert.data = result.records;
            pagination.total = result.total;
        } finally {
            deviceAlert.loading = false;
        }
    };
    const onPageChange = (pageNum: number) => {
        pagination.current = pageNum;

        fetchDeviceAlertData({
            deviceId: query.id,
            size: pagination.pageSize,
            current: pageNum,
        });
    };

    fetchDeviceAlertData({
        deviceId: query.id,
        size: pagination.pageSize,
        current: 1,
    });
</script>

<style scoped lang="less">
    .detail-number {
        display: inline-block;
        font-size: 14px;

        span {
            padding: 0 10px;
            color: red;
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
        }
    }
</style>
